<!--    客户管理-客户详情---回访记录  by jh   -->
<template>
    <div>
        <!--样式设置-->
        <div class="ca-p-20">
            <el-row>
                <el-col :span="20">
                    <div class="ca-title"><h3 class="h3">回访记录：</h3></div>
                </el-col>
                <el-col :span="4" >
                    <div class="ca-pull-right">
                        <!--<el-button v-if="!isAddReturnVisit"  icon="el-icon-plus" class="ca-color-download" @click.stop="addReturnVisitFun"-->
                                   <!--:disabled="!isAuthCreate"-->
                        <!--&gt;新建回访记录</el-button>-->
                        <el-button type="primary" v-if="!isAddReturnVisit"  @click.stop="addReturnVisitFun"
                                   :disabled="!isAuthCreate"
                                   size="medium"
                        >添加</el-button>
                    </div>
                </el-col>
            </el-row>
            <div class="ca-m-t-20">
                <!--添加客户回访记录 组件-->
                <addReturnVisit
                    v-if="isAddReturnVisit"
                    :isAddReturnVisit="isAddReturnVisit"
                    :addReturnVisitFun="addReturnVisitFun"
                    :userList="userList"
                    @getReturnRecordList="getReturnRecordList">
                </addReturnVisit>
                <!--客户回访记录 详情编辑 组件-->
                <div >
                      <div class="ca-box  big-box" v-for="(item,index) in tableData" :key="index" :name="index">
                          <div  v-if="!item.isEdit">
                              <div class="box-top ">
                                  <el-row >
                                      <el-col :span="7" class="colFont overFlowHidden">回访人：{{item.visitUser | getUserName(userList)}}</el-col>
                                      <el-col :span="8" class="colFont">回访时间：{{item.visitTime}}</el-col>
                                      <el-col :span="7" class="colFont">记录时间：{{item.createTime}}</el-col>
                                      <el-col :span="1" class="colFont">
                                          <el-button type="text"  @click.stop="editReturnVisitFun(item)"
                                                     :disabled="!isAuthEdit"
                                          >
                                              <i class="el-icon-edit-outline iconStyle" ></i>
                                          </el-button>
                                      </el-col>
                                      <el-col :span="1" class="colFont">
                                          <el-button type="text" v-if="!item.showDown" @click="isShowBottomFun(item)" >
                                              <i class="el-icon-arrow-down iconStyle" ></i>
                                          </el-button>
                                          <el-button type="text" v-if="item.showDown"  @click="isShowBottomFun(item)" >
                                              <i class="el-icon-arrow-up iconStyle" ></i>
                                          </el-button>
                                      </el-col>
                                  </el-row>
                              </div>
                              <div class="box-bottom" v-if="item.showDown">
                                  <!--回访记录详情-->
                                  <csReturnVisitDetail
                                      :itemData="item"
                                      v-if="isReturnVisitDetail">
                                  </csReturnVisitDetail>
                              </div>
                          </div>
                          <!--回访记录编辑-->
                          <csEditReturnVisit
                              v-if="item.isEdit"
                              :itemData="item"
                              :editReturnVisitFun="editReturnVisitFun"
                              :userList="userList"
                              @getReturnRecordList="getReturnRecordList">
                          </csEditReturnVisit>
                      </div>
                </div>

            </div>
        </div>
    </div>
</template>

<script type="text/ecmascript-6">
    import {api} from '../../api';
    import {STATUS_HTTP_SUCCESS, apiHttp} from '__service/csHttp';
    import { isNoAuth } from '__service/utils';
    export default {
        data() {
            return {
                userList: [],//用户列表
                guestId: this.$route.params.eClient_guestId,
                isAddReturnVisit: false,//是否显示 添加客户回访记录 组件
                tableData: [],//后台数据
                isReturnVisitDetail: true,//是否显示 回访记录详情
                isAuthCreate: isNoAuth('客户管理-回访记录-新建'),
                isAuthEdit: isNoAuth('客户管理-回访记录-编辑'),
            }
        },
        watch: {

        },
        mounted() {
            this.getUserList()
            this.getReturnRecordList()
        },
        methods: {
            getUserList() {
                let params = {
                    userName: ''
                }
                apiHttp(api.GET_USER_LIST,params).then(ret=> {
                    if (ret.resCode === STATUS_HTTP_SUCCESS) {
                        this.userList = ret.data
                    }
                })
            },
            isShowBottomFun(data) {
                //console.log(data)
                data.showDown = !data.showDown
            },
            //显示/隐藏 添加客户回访 组件
            addReturnVisitFun() {
                this.isAddReturnVisit = !this.isAddReturnVisit
            },
            //编辑回访 ---回访详情  切换
            editReturnVisitFun(data) {
                data.isEdit = !data.isEdit
            },
            getReturnRecordList() {
                //let that = this
                let params = {
                    guestId: this.guestId
                }
                apiHttp(api.RETURN_RECORD_LIST,params).then(ret=> {
                    if (ret.resCode === STATUS_HTTP_SUCCESS) {
                        //console.log(ret,"回访记录列表")
                        //清空一下数组
                        this.tableData = []
                        let data = ret.data
                        let arr = []
                        //简化数据
                        data.map((item)=>{
                            arr.push(item.visitBaseVoList[0])
                        })
                        arr.sort(sortByTimeDesc)
                        arr.map((item)=>{
                            //格式化日期
                            item.createTime = this.$moment(item.createTime).format('YYYY-MM-DD HH:mm:ss');
                            item.visitTime = this.$moment(item.visitTime).format('YYYY-MM-DD HH:mm:ss');
                            //添加一个字段
                            item.showDown = false //是否显示 回访记录详情  下方的东西
                            item.isEdit = false  //是否显示 回访 编辑
                        })
                        this.tableData = arr
                    }
                })
            }
        },
        components: {
            'addReturnVisit': require('__views/customer-management/info/returnVisitRecord/addReturnVisit/index.vue'), //添加回访
            'csReturnVisitDetail': require('./returnVisitDetail/returnVisitList'), //回访详情
            'csEditReturnVisit': require('./returnVisitDetail/editReturnVisit'), //编辑回访
        },
    }
    //根据时间倒序排列
    function sortByTimeDesc(a,b) {
         return b.createTime - a.createTime
    }
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
    //空间居中
    .padding-set{
        margin-top: 10px;
        padding:0 2%;
        padding-bottom:50px;
    }
    .colFont{
        font-size: 14px;
        line-height: 80px;
    }
    .big-box{
        width:100%;
        margin-bottom: 20px;
        &:hover{
            border: 1px solid #409EFF;
        }
    }
    .box-top{
        width:100%;
        height: 80px ;
        padding: 0 10px;
    }
    .box-bottom{
        border-top: 1px solid #ebeef5;
        width:100%;
        padding-bottom: 20px;
        /*display: none;*/
    }
    .iconStyle{
        font-size: 20px
    }
.overFlowHidden{
    padding-right: 10px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
</style>
